<template>
	<div class="homePage">
		<div class="home_top" ref='homeTop'>
			<img src="../../../../static/img/images/home.jpg" class="home_top_bj" />
			<div class="homeTitle">
				<span class="home_top_name">主题名称</span>
				<img src="../../../../static/img/images/home1.png" class="home_top_img" />
				<span class="home_top_name2">专题店尾缀名称</span>
				<img src="../../../../static/img/images/home1.png" class="home_top_img" />
				<span class="home_top_text">匠作优品主题名店</span>
			</div>
		</div>
		<div class="home_title clear2" ref='homeTitle'>
			<img src="../../../../static/img/images/logo.jpg" class="home_title_img"/>
			<span class="home_title_more" @click="jump">更多名店<i class="el-icon-arrow-right"></i></span>
		</div>
		<div class="home_tab clear2" ref='hometab' >
			<div @click="tabClick(key)" class="home_tabDiv flex1" v-for="(data,key) in buttonData" :class="key==buttonDataI?'home_tabDivactive':''">
				<div class="home_tabDiv1">
					{{data.name}}
				</div>
				<div class="home_tabDiv2" @click="tabSubShow(key)">
					<i :class="data.Show?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
				</div>
				<div class="home_tabSub" v-if="data.sub.length!=0" v-show="data.Show">
					<div v-for="(data2,key2) in data.sub" @click.stop="goAnchor(key2)"  :class="buttonDataChildI==key2?'home_tabSub2':''">
						{{data2.name}}
					</div>
				</div>
			</div>
			
		</div>
		<div class="home_tab clear2 home_tabfix" v-if="sw">
			<div @click="tabClick(key)" class="home_tabDiv flex1" v-for="(data,key) in buttonData" :class="key==buttonDataI?'home_tabDivactive':''">
				<div class="home_tabDiv1">
					{{data.name}}
				</div>
				<div class="home_tabDiv2" @click="tabSubShow(key)">
					<i :class="data.Show?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
				</div>
				<div class="home_tabSub" v-if="data.sub.length!=0" v-show="data.Show">
					<div v-for="(data2,key2) in data.sub" @click.stop="goAnchor(key2)" :class="buttonDataChildI==key2?'home_tabSub2':''">
						{{data2.name}}
					</div>
				</div>
			</div>
			
		</div>
		<div class="home_body" v-if="bodyData.length!=0">
			<div  class="home_bodyDiv" v-for="(data,key) in bodyData">
				<div class="home_bodyTop">
					<p class="home_bodyTitle">
						<span class="home_bodyName">{{buttonData[buttonDataI].sub[buttonDataChildI].name}}</span>
						<span class="home_bodySub">{{data.name}}</span>
					</p>
				</div>
				<div class="home_body_banner" @click="homeLink(data.url)">
					<img :src='data.src' />
				</div>
				<div class="zwcp" v-if='buttonDataI==0&&buttonDataChildI!=0'>大剧即将上线，敬请期待……</div>
				<div class="zwcp" v-if='buttonDataI!=0'>店主未开通功能</div>
			</div>
		</div>
		
		<div class="home_body" v-else>
			<div class="home_bodyDiv">
				<div class="home_bodyTop">
					<p class="home_bodyTitle">
						<span class="home_bodyName">{{buttonData[buttonDataI].sub[buttonDataChildI].name}}</span>
						
					</p>
				</div>
				<div class="zwcp" v-if='buttonDataI==0&&buttonDataChildI!=0'>大剧即将上线，敬请期待……</div>
			</div>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import vFooter from '../../common/footer.vue';
	import scrollIt from '../../common/utils/scrollIt';
	export default {
		components:{
            vFooter
        },
        watch:{
        	scroll:function(val){
        		this.scro
        	}
        },
		data: function() {
			return {
				buttonData:[{
					'name':'专题活动',
					'sub':[{
						'name':'我是主角',
						'child':[{
							'name':'共享代言',
							'src':'../../../../static/img/images/011.png',
							'url':'/homeShare'
						}],
					},{
						'name':'不夜澳门',
						'child':[],
					},{
						'name':'探优达人',
						'child':[],
					}],
					'Show':false,
				},{
					'name':'云端乐享',
					'sub':[{
						'name':'独树一帜',
						'child':[{
							'name':'臻品典藏',
							'src':'../../../../static/img/images/10.png'
						},{
							'name':'专属定制',
							'src':'../../../../static/img/images/11.png'
						},{
							'name':'归集重置',
							'src':'../../../../static/img/images/09.png'
						}],
					},{
						'name':'双桂联芳',
						'child':[{
							'name':'结缘伙拼',
							'src':'../../../../static/img/images/01.png'
						},{
							'name':'死党助力',
							'src':'../../../../static/img/images/03.png'
						},{
							'name':'老铁转馈',
							'src':'../../../../static/img/images/05.png'
						}],
					},{
						'name':'众星拱月',
						'child':[{
							'name':'合力众惠',
							'src':'../../../../static/img/images/06.png'
						},{
							'name':'分享共赢',
							'src':'../../../../static/img/images/02.png'
						},{
							'name':'组团免费',
							'src':'../../../../static/img/images/04.png'
						}],
					}],
					'Show':false,
				},{
					'name':'店内动态',
					'sub':[{
						'name':'新闻通知',
						'child':[{
							'name':'热门新闻',
							'src':'../../../../static/img/images/13.png'
						},{
							'name':'重要通知',
							'src':'../../../../static/img/images/13.png'
						}],
					},{
						'name':'匠品推选',
						'child':[{
							'name':'爆款热选',
							'src':'../../../../static/img/images/13.png'
						},{
							'name':'人气推介',
							'src':'../../../../static/img/images/13.png'
						}],
					},{
						'name':'知识论坛',
						'child':[{
							'name':'常识课堂',
							'src':'../../../../static/img/images/13.png'
						},{
							'name':'说长论短',
							'src':'../../../../static/img/images/13.png'
						}],
					}],
					'Show':false,
				}],
				buttonDataI:0,
				buttonDataChildI:0,
				sw:false,
				scroll:0,
				scrollHight:0,
				bodyData:[],
			}
		},
		mounted() {
			this.bodyData=this.buttonData[this.buttonDataI].sub[this.buttonDataChildI].child;
			window.addEventListener('scroll',this.scro); 
			this.scrollHight=this.$refs.homeTop.offsetHeight+this.$refs.homeTitle.offsetHeight
		},
		methods: {
			scro(){
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                this.scroll=scrollTop;
                if(scrollTop >=this.scrollHight) { 
                	this.sw = true;
                } 
                else{
                	this.sw = false;
                }
			},
			homeLink(url){
				if(url){
					this.$router.push({
						path: url,
					})
				}
			},
			jump(){
				this.$router.push({
					path: '/recommend',
				})
			},
			goAnchor(index) {
				this.buttonDataChildI=index;
				this.bodyData=this.buttonData[this.buttonDataI].sub[this.buttonDataChildI].child;
				let gotoTop= ()=>{
		        let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
		        currentPosition -= 10;
		        if (currentPosition > this.scrollHight) {
		        	window.scrollTo(0, currentPosition);
		        }
		        else {
		        	window.scrollTo(0, this.scrollHight+5);
		            clearInterval(timer);
		            timer = null;
		          }
		        }
		        let timer=setInterval(gotoTop,1);
        		this.$set(this.buttonData[this.buttonDataI],'Show',!this.buttonData[this.buttonDataI].Show)
		   	},
			tabClick(Key){
				if(this.buttonDataI!=Key){
					this.$set(this.buttonData[this.buttonDataI],'Show',false)
				}
				this.buttonDataI=Key;
				this.bodyData=this.buttonData[this.buttonDataI].sub[0].child;
				
			},
			tabSubShow(Key){
				if(this.buttonDataI==Key&&this.buttonData[Key].sub.length!=0){
					this.$set(this.buttonData[Key],'Show',!this.buttonData[Key].Show)
				}
			}
		}
	}
</script>

<style scoped>
	.home_tabSub2{
		color: #f7bd40;
	}
	.home_top{
		padding: 2rem 0;
		text-align: center;
		position: relative;
	}
	.home_top_bj{
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
		height: 100%;
		z-index: -1;
	}
	.homeTitle{
		display: inline-block;
		margin: 0 auto; 
		padding: 1rem 0;
		width: 60%;
		text-align: center;
	}
	.home_top_name{
		display: block;
		font-size: 3rem;
		color: #fff;
		text-align: center;
		line-height: 3rem;
		margin-bottom: 0.6rem;
	}
	.home_top_name2{
		display: block;
		text-align: center;
		font-size: 2.2rem;
		padding: 0.5rem 0;
		color: #fff;
		line-height: 2.2rem;
	}
	.home_top_text{
		display: block;
		text-align: center;
		font-size: 1.3rem;
		color: #ffe94f;
		margin-top: 1rem;
		line-height: 2rem;
	}
	.home_top_img{
		width: 100%;
		display: block;
		height: 1px;
	}
	.home_title{
		width: 95%;
		margin: 0 auto;
		padding: 0 2.5%;
		border-bottom: 1px solid #e6e6e6;
	}
	.home_title_img{
		display: block;
		float: left;
		height: 4rem;
		margin-left: -0.3rem;
	}
	.home_title_more{
		line-height: 4rem;
		font-size: 1.8rem;
		float: right;
		color: #7f7f7f;
		display: inline-block;
		
	}
	.home_tab{
		width: 95%;
		margin: 0 auto;
		padding: 0 2.5%;
		display: flex;
		margin: 0.5rem 0 0rem 0;
	}
	.home_tabfix{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		margin: 0;
		background: #fff;
	}
	.home_tabDiv{
		float: left;
		width: 25%;
		position: relative;
		
	}
	.home_tabDiv1{
		margin-right: 1px;
		box-sizing: border-box;
		text-align: center;
		background: #000;
		font-size: 1.4rem;
		line-height: 3.5rem;
		color: #fff;
		border-bottom: 1px solid #666666;
	}
	.home_tabDiv2{
		margin-right: 1px;
		box-sizing: border-box;
		text-align: center;
		background: #000;
		font-size: 1.4rem;
		color: #fff;
		line-height: 2.7rem;
	}
	.home_tabDiv:nth-child(1) .home_tabDiv1{
		border-top-left-radius: 0.5rem;
	}
	.home_tabDiv:nth-child(1) .home_tabDiv2{
		border-bottom-left-radius: 0.5rem;
	}
	.home_tabDiv:nth-last-child(1) .home_tabDiv1{
		border-top-right-radius: 0.5rem;
	}
	.home_tabDiv:nth-last-child(1) .home_tabDiv2{
		border-bottom-right-radius: 0.5rem;
	}
	.home_tabDivactive .home_tabDiv1{
		color: #f7bd40;
	}
	.home_tabDivactive .home_tabDiv2{
		color: #f7bd40;
	}
	.home_tabSub{
		position: absolute;
		width: 100%;
		bottom: 0;
		text-align: center;
		color: #fff;
		transform: translate(0,95%);
		z-index: 2;
		line-height: 3.5rem;
	}
	.home_tabSub div{
		margin-right: 1px;
		background: #000;
		box-sizing: border-box;
		border-bottom: 1px solid #666666;
	}
	.home_body{
		width: 100%;
	}
	.home_bodyDiv{
		width: 100%;
	}
	.home_bodyTop{
		text-align: center;
		margin: 1rem 0;
	}
	.home_bodyTitle{
		display: inline-block;
		border: 1px solid #000000;
		overflow: hidden;
		height: 2rem;
		box-sizing: border-box;
		border-radius: 0.4rem;
	}
	.home_bodyName{
		padding: 0 0.5rem;
		height: 1.9rem;
		line-height: 1.9rem;
		font-size: 1.3rem;
		display: inline-block;
		text-align: center;
	}
	.home_bodySub{
		padding: 0 0.5rem;
		height: 1.9rem;
		display: inline-block;
		line-height: 1.9rem;
		font-size: 1.3rem;
		text-align: center;
		background: #000;
		color: #f7bd40;
	}
	.home_body_banner{
		width: 100%;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
</style>
